//global variables for mapApp and map object
		var myMapApp = new mapApp(false,undefined);
		var myMainMap;


		function init(evt) 
		{
			
			//dynamic layer array that allow loading from database
			var dynamicLayers = new Array();
			//initialize digiLayers (layers that allow digitizing)
			var digiLayers = new Array();

			//define some styles for the map object
			var zoomRectStyles = {"fill":"none","stroke":"crimson","stroke-width":0.002,"stroke-dasharray":"0.012,0.002"};
			var highlightStyles = {"stroke":"crimson","stroke-width":0.002};
			var dragRectStyles = {"fill":"lightskyblue","fill-opacity":0.5};

			// window styles
			var winPlaceholderStyles = {"fill":"none","stroke":"black","stroke-width":1.5};
			var windowStyles = {"fill":"aliceblue","stroke":"black","stroke-width":1};
			var titlebarStyles = {"fill":"steelblue","stroke":"black","stroke-width":1};
			var statusbarStyles = {"fill":"aliceblue","stroke":"black","stroke-width":1};
			var titletextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"white","font-weight":"bold"};
			var statustextStyles = {"font-family":"Arial,Helvetica","font-size":8,"fill":"white"};
			var windowButtonStyles ={"fill":"steelblue","stroke":"white","stroke-width":2};

			//button styles, adopt the style settings to match your needs
			var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"black","font-size":10};
			var buttonStyles = {"fill":"white"};
			var shadeLightStyles = {"fill":"rgb(235,235,235)"};
			var shadeDarkStyles = {"fill":"black"};

			//zoom slider styles
			var sliderStyles={"stroke":"black","stroke-width":2};

			// checkbox labeltext styles

			var labeltextStyles = {"font-family":"Arial,Helvetica","fill":"black","font-size":12};

			//initialize myMainMap object, you need to adopt the parameters here
			myMainMap = new map("mainMap",73.02,30,0.6,0,4326,String.fromCharCode(176),1,true,"coordX","coordY",dynamicLayers,digiLayers,"",zoomRectStyles,highlightStyles,dragRectStyles,"referenceMap","myDragCrossSymbol",4750);

			// create windows
			myMapApp.windows = new Array();
			myMapApp.windows["navWindow"] = new Window("navWindow","windows",0,0,855,355,true,10,10,1020,600,true,winPlaceholderStyles,windowStyles,3,true,false,""," ",false,false,false,titlebarStyles,15,statusbarStyles,12,titletextStyles,statustextStyles,windowButtonStyles,undefined);
			// append navigation elements to the window
			myMapApp.windows["navWindow"].appendContent("referenceMap",true);
			myMapApp.windows["navWindow"].appendContent("naviContent",true);
			
	
			//create zoom slider
			myMapApp.zoomSlider = new slider("mapZoomSlider","mapZoomSlider",195,47,myMainMap.minWidth,195,92,myMainMap.maxWidth,myMainMap.maxWidth,sliderStyles,10,"sliderSymbol",myMapApp.refMapDragger,true);
			
			//now initialize buttons
			myMapApp.buttons = new Array();
			//button instance creation
			//groupId,functionToCall,buttonType,buttonText,buttonSymbolId,x,y,width,height,textStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,shadowOffset
			myMapApp.buttons["zoomIn"] = new button("zoomIn","zoomIn",zoomImageButtons,"rect",undefined,"magnifyerZoomIn",185,22,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["zoomOut"] = new button("zoomOut","zoomOut",zoomImageButtons,"rect",undefined,"magnifyerZoomOut",185,100,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["infoButton"] = new switchbutton("infoButton","infoButton",zoomImageSwitchButtons,"rect",undefined,"infoBut",5,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["infoButton"].setSwitchValue(true,false);
			statusChange("Mode: Infomode");
			myMapApp.buttons["zoomFull"] = new button("zoomFull","zoomFull",zoomImageButtons,"rect",undefined,"magnifyerFull",35,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["zoomManual"] = new switchbutton("zoomManual","zoomManual",zoomImageSwitchButtons,"rect",undefined,"magnifyerManual",65,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["panManual"] = new switchbutton("panManual","panManual",zoomImageSwitchButtons,"rect",undefined,"symbPan",95,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["recenterMap"] = new switchbutton("recenterMap","recenterMap",zoomImageSwitchButtons,"rect",undefined,"symbRecenter",125,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["backwardExtent"] = new button("backwardExtent","backwardExtent",zoomImageButtons,"rect",undefined,"symbArrowLeft",155,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMapApp.buttons["forwardExtent"] = new button("forwardExtent","forwardExtent",zoomImageButtons,"rect",undefined,"symbArrowRight",185,135,20,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
			myMainMap.checkButtons();

            //load function specific to the current map project
			loadProjectSpecific();


            
			//checkBoxes
			myMapApp.checkBoxes=new Array();

			myMapApp.checkBoxes["rivers"] = new checkBox("cb_eu_rivers","checkBoxes", 0,0,"checkBoxRect","checkBoxCross",true,"rivers",labeltextStyles,12,5.5,undefined, sj.toggle_rivers);
			myMapApp.checkBoxes["diagram"] = new checkBox("diagram", "checkBoxes", 100, 0, "checkBoxRect", "checkBoxCross", false, "diagrams", labeltextStyles, 12, 5.5, undefined, sj.toggle_diagram);
			
			
			//selectionList styles
			var selBoxtextStyles = {"font-family":"Arial,Helvetica","font-size":11,"fill":"black"};

			var years = [2004, 2005, 2006, 2007, 2008, 2009];
				
			
			var selBoxStyles = {"stroke":"black","stroke-width":1,"fill":"white"};
			var selBoxScrollbarStyles = {"stroke":"black","stroke-width":1,"fill":"whitesmoke"};
			var selBoxSmallrectStyles = {"stroke":"black","stroke-width":1,"fill":"lightgray"};
			var selBoxHighlightStyles = {"fill":"black","fill-opacity":0.3};
			var selBoxTriangleStyles = {"fill":"black"};
			
			//selectionList
			myMapApp.selYears=new Array();

			var selYears = new selectionList("year","myselectionList",years,85,1160,280,16,10,6,selBoxtextStyles,selBoxStyles,selBoxScrollbarStyles,selBoxSmallrectStyles,selBoxHighlightStyles,selBoxTriangleStyles,undefined,false,true,sj.yearCallback);


        }
		
		
		//this function is called after each pan or zoom or change of map extent
		//you can place project specific functions here that need to react on the map extent, e.g. adopting line-widths, loading additional data, etc.
		function loadProjectSpecific() 
		{
			
            sj.interactivity();
			getWMSImage();
            
		}
		
		function getWMSImage()
			{			
			var myRasterLayer = document.getElementById("diagram");

			if (myRasterLayer.childNodes.length > 0)
			{;	
			var oldImage = document.getElementById("Rasterimage");
			myRasterLayer.removeChild(oldImage);
			}
				
			if (document.getElementById("diagram").getAttributeNS(null,"visibility") ==
			"visible")
			{
			var myRasterImage = document.createElementNS(svgNS,"image");

			myRasterImage.setAttributeNS(null,"x",myMainMap.curxOrig);
			myRasterImage.setAttributeNS(null,"y",myMainMap.curyOrig);
			myRasterImage.setAttributeNS(null,"width",myMainMap.curWidth);
			myRasterImage.setAttributeNS(null,"height",myMainMap.curHeight);
			myRasterImage.setAttributeNS(null,"id","Rasterimage");
							
			var myImageUrl = "http://karlinapp.ethz.ch/fcgi-bin/qgis_map_server/mmkarto2011_jsven/qgis_map_serv.fcgi?SERVICE=WMS&Version=1.3.0&REQUEST=GetMap&LAYERS=mmkarto11_jsven_theme_points&TRANSPARENT=true&STYLES=default&EPSG:" + myMainMap.epsg;
			myImageUrl += "&BBOX=" + (parseFloat(myMainMap.curyOrig + myMainMap.curHeight) * -1) + "," + parseFloat(myMainMap.curxOrig) ;
			myImageUrl += "," + Math.round(parseFloat(myMainMap.curyOrig) * -1) + "," + Math.round(parseFloat(myMainMap.curxOrig + myMainMap.curWidth));
			myImageUrl += "&width=" + parseInt(myMainMap.pixWidth) + "&height=" + parseInt(myMainMap.pixHeight) + "&format=image/png&TRANSPARENT=true";
			myRasterImage.setAttributeNS(xlinkNS,"xlink:href",myImageUrl);
			myRasterLayer.appendChild(myRasterImage);
			}
			}

		